<template>
  <div class="attr-list">
    <CommonAttr />
    <px-form>
      <px-form-item label="title">
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.title
          "
        />
      </px-form-item>
      <px-form-item label="maxheight">
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.maxheight
          "
        />
      </px-form-item>
      <px-form-item label="contentList">
        <px-input v-model="jsonRaw" style="width: 240px" :rows="2" type="textarea" @change="jsonFun" />
      </px-form-item>
      <px-form-item label="collapsed">
        <px-radio-group
          v-model="
            //@ts-ignore
            curComponent.propValue.collapsed
          "
          class="ml-4"
        >
          <px-radio :label="true" size="large">开启</px-radio>
          <px-radio :label="false" size="large">关闭</px-radio>
        </px-radio-group>
      </px-form-item>
      <px-form-item label="size">
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.size
          "
        />
      </px-form-item>
      <px-form-item label="titleIconName">
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.iconName
          "
        />
      </px-form-item>
      <px-form-item label="开启侦测标识">
        <px-radio-group
          v-model="
            //@ts-ignore
            curComponent.propValue.isDetect
          "
          class="ml-4"
        >
          <px-radio :label="true" size="large">开启</px-radio>
          <px-radio :label="false" size="large">关闭</px-radio>
        </px-radio-group>
      </px-form-item>
    </px-form>
  </div>
</template>

<script setup lang="ts">
import CommonAttr from "@visual/custom-component/common/CommonAttr.vue";
import { useComponent } from "@visual/stores";
import { storeToRefs } from "pinia";
import { ref } from "vue";

const componentStore = useComponent();
const { setCurComponentProps } = componentStore;
const { curComponent } = storeToRefs(componentStore);
const jsonRaw = ref("");
import { parseObjectLiteral } from "@visual/utils";

function jsonFun() {
  try {
    let json = parseObjectLiteral(jsonRaw.value);
    if (Array.isArray(json)) {
      setCurComponentProps({ key: "contentList", val: json });
    } else {
      setCurComponentProps({ key: "contentList", val: [json] });
    }
  } catch (e) {
    console.log(e);
  }
}
</script>
